<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>我的评价 - 网上跳蚤市场</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" th:href="@{/css/style.css}" />
</head>
<body>
<div th:replace="layout :: .nav"></div>
<div class="container">
    <section>
        <h2>我的评价</h2>
        <div id="reviewList"></div>
        <div id="msg"></div>
    </section>
</div>
<script>
    async function loadMyReviews() {
        try {
            const res = await fetch('/api/reviews/my-reviews', {
                credentials: 'include'
            });

            if (res.status === 401 || res.status === 403) {
                window.location.href = '/login';
                return;
            }

            const data = await res.json();

            if (!data || data.length === 0) {
                document.getElementById('reviewList').innerHTML = '<p>暂无评价记录</p>';
                return;
            }

            let html = '<table><tr><th>评价时间</th><th>订单ID</th><th>商品名称</th><th>描述评分</th><th>响应评分</th><th>评价内容</th></tr>';

            for (const review of data) {
                const productName = review.order && review.order.product ? review.order.product.name : '商品已删除';
                const orderId = review.order ? review.order.id : '订单已删除';
                const createdDate = new Date(review.createdAt).toLocaleString();

                html += `<tr>
                <td>${createdDate}</td>
                <td>${orderId}</td>
                <td>${productName}</td>
                <td>${review.descriptionScore}/5</td>
                <td>${review.responseScore}/5</td>
                <td>${review.comment || '无评价内容'}</td>
            </tr>`;
            }

            html += '</table>';
            document.getElementById('reviewList').innerHTML = html;
        } catch (e) {
            console.error('加载评价失败:', e);
            document.getElementById('reviewList').innerHTML = '<p class="error-msg">加载评价失败，请刷新重试</p>';
        }
    }

    // 页面加载时加载评价
    loadMyReviews();
</script>
<style>
    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }
    th, td {
        padding: 10px;
        border: 1px solid #ddd;
        text-align: left;
    }
    th {
        background-color: var(--primary-color);
        color: white;
    }
    tr:nth-child(even) {
        background-color: #f2f2f2;
    }
</style>
</body>
</html>